<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul class="stu-list"></ul>
    <!-- 用Ajax解析JSON文件 -->
    <script>
      //1.创建请求对象
      var xhr = new XMLHttpRequest();
      //2.建立请求连接
      xhr.open("get", "./students.json", true); //get:请求方式 true:表示异步操作
      //4.前端对请求的结果进行处理
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
          //如果请求成功
          // console.log(JSON.parse(xhr.responseText));
          //responseText:获取请求的结果
          var data = JSON.parse(xhr.responseText),
            txt = "";
          for (var i = 0; i < data.length; i++) {
            txt += "<li>" + data[i].name + "</li>";
          }
          console.log(txt);
          document.getElementsByClassName("stu-list")[0].innerHTML = txt;
        }
      };
      //3.向后台发送请求
      xhr.send();
    </script>
  </body>
</html>
